<div class="w-full max-w-xs mx-auto mt-2">
  <form class="bg-white shadow-md rounded px-8 pt-6 pb-8 mb-4" (submit)="onSubmit($event)">
    <h3 class="text-3xl font-bold text-center text-teal-700 mb-4">登录</h3>
    <div class="mb-4">
      <label class="block text-gray-700 text-sm font-bold mb-2" for="email">
        邮箱
      </label>
      <input
        class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
        id="email"
        name="email"
        type="text"
        [(ngModel)]="email"
        placeholder="邮箱"
      />
    </div>
    <div class="mb-4">
      <label class="block text-gray-700 text-sm font-bold mb-2" for="password">
        密码
      </label>
      <input
        class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
        id="password"
        name="password"
        type="password"
        [(ngModel)]="password"
        placeholder="密码"
      />
    </div>
    <div class="flex items-center justify-between">
      <button class="btn btn-blue-500" type="submit">
        &nbsp;登录&nbsp;
      </button>
      <a [routerLink]="['/register']" class="text-teal-500">去注册</a>
    </div>
  </form>
  <p class="text-center text-gray-500 text-xs">
    &copy;2019 Acme Corp. All rights reserved.
  </p>
</div>
